<template>
  <div class="container">
    <div class="user_item">
      <img v-if="isShow" class="user_img" :src="userInfo.avatarUrl">
      <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户信息</button>
      <div class="user_text_info">
        <p class="user_name">Hi, {{ userInfo.nickName }}</p>
        <p class="user_level">lv {{ userDetail.level }}</p>
      </div>

      <div class="checkin_item" style="margin-left: auto">
        <div v-if="is_signIn === false">
          <i-button @click="handleClick" type="error" @tap="sendSign">点击签到</i-button>
        </div>
        <div v-else="is_signIn">
          <i-button disabled>签到成功</i-button>
        </div>
      </div>

    </div>

    <div class="user_study_record">
      <div class="study_day_item">
        <p class="num_1">{{ userDetail.days }}</p>
        <p class="num_2">学习天数</p>

      </div>

      <div class="sentences_item">
        <p class="num_1">{{ userDetail.sum }}</p>
        <p class="num_2">学习句子</p>
      </div>

    </div>
    <div>
      <div style="width: 750rpx; height: 300px; margin-top: 40px; position: absolute; z-index: 9"></div>
      <Calendar multi="true" :value="daystest"/>
    </div>

    <i-cell-group>
      <i-cell title="我的学习记录" is-link :url="'/pages/record/main?index='+index"></i-cell>
      <i-cell title="我的收藏" is-link url="/pages/collection/main"></i-cell>
    </i-cell-group>
  </div>
</template>


<script>
  import Calendar from 'mpvue-calendar'
  import 'mpvue-calendar/src/style.css'
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
        is_signIn: '', // 标识用户当天是否已签到
        URL: this.GLOBAL.apiUrl, // 服务器地址
        index: 0, // 标识数组下标用于页面间跳转参数传递
        isShow: false, // 若用户已授权则显示用户信息
        userInfo: {}, // 存放用户微信信息
        userDetail: [], // 存放用户系统信息
        // isCheckin: false, // 用于标识用户签到信息
        daystest: [] // 存放用户签到日期
      }
    },
    computed: {
      ...mapState([
        'userId'
      ])
    },
    components: {
      Calendar
    },
    beforeMount () {
      // 挂载前获取用户信息
      let _that = this
      wx.request({
        url: _that.URL + 'user/getSignDays',
        method: 'POST',
        data: {
          userId: this.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let daystest = res.data.data.list
          _that.daystest = daystest
        }
      })
      wx.request({
        url: _that.URL + 'user/getUser',
        method: 'POST',
        data: {
          userId: this.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let userDetail = res.data.data
          let signIn = res.data.data.signIn
          _that.userDetail = userDetail
          _that.is_signIn = signIn
        }
      })
      this.handleGetUserInfo()
    },
    methods: {
      sendSign () {
        // 发送用户签到信号到服务器
        this.is_signIn = true
        wx.request({
          url: this.URL + 'user/signIn',
          method: 'POST',
          data: {
            userId: this.userId
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        })
      },
      handleGetUserInfo () {
        // 调用wx.getUserInfo获取用户信息
        let _that = this
        wx.getUserInfo({
          success: (data) => {
            _that.userInfo = data.userInfo
            _that.isShow = true
          },
          fail: () => {
            console.log('获取失败')
          }
        })
      },
      getUserInfo (data) {
        if (data.mp.detail.rawData) {
          this.handleGetUserInfo()
        }
      }
      // handleClick () {
      //   this.isCheckin = !this.isCheckin
      // }
    }
  }
</script>

<style scoped>
  /* 用户信息栏 */
  .user_item {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    background-color: #ffffff;
    height: 195rpx;
    align-items: center;
  }
  .user_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin: 30rpx;
  }
  .user_text_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: center;
  }
  .user_name {
    font-size: 17px;
    font-weight: bold;
  }
  /* 学习天数、学习句子 */
  .user_study_record {
    display: flex;
    flex-direction: row;
    margin-top: 3rpx;
    background-color: #ffffff;
    height: 117rpx;
    justify-content: center;
  }
  .study_day_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300rpx;
    text-align: center;
  }
  .sentences_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300rpx;
    text-align: center;
  }
  .num_1 {
    font-size: 34rpx;
  }
  .num_2 {
    color: grey;
    font-size: 28rpx;
  }
  .user_sign_in {
    display: flex;
    flex-direction: column;
    margin-top: 17rpx;
    background-color: #ffffff;
    margin-bottom: 17rpx;
  }
  .my_study {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    height: 80rpx;
    align-items: center;
  }
  .my_study img {
    width: 40rpx;
    height: 40rpx;
    padding: 10rpx;
    padding-left: 30rpx;
  }
  .user_collect {
    display: flex;
    flex-direction: row;
    margin-top: 4rpx;
    background-color: #ffffff;
    height: 80rpx;
    align-items: center;
  }
  .user_collect img {
    width: 40rpx;
    height: 40rpx;
    padding: 10rpx;
    padding-left: 30rpx;
  }
  .arrow1 {
    margin-left: 380rpx;

  }
  .arrow2 {
    margin-left: 445rpx;
  }
</style>
